<template>
  <el-dialog draggable v-model="isShowPreview" append-to-body>
    <div slot="title">{{ sourceTitle || title }}</div>
    <!-- iframe -->
    <template v-if="typeSource === 'iframe'">
      <div
        class="ele-gallery-iframe embed-responsive embed-responsive-16by9"
        v-if="isShowPreview"
      >
        <iframe
          :src="sources[initialIndex].src"
          allowfullscreen="true"
          border="0"
          frameborder="no"
          framespacing="0"
          scrolling="no"
        ></iframe>
      </div>
    </template>

    <!-- 图片 -->
    <template v-else-if="typeSource === 'image'">
      <!-- 单张图片 -->
      <div  v-if="(sliceSingle && sources[initialIndex]) || sources.length === 1" style="display: flex; align-items: center; justify-content: center;">
        <el-image
          :src="sources[initialIndex].src"
          class="ele-gallery-image"
          zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="[sources[initialIndex].src]"
          :initial-index="4"
        />
      </div>
      

      <!-- 多张图片 -->
      <el-carousel
        :initial-index="initialIndex"
        @change="handleCarouselChange"
        :height="bannerHeight + 'px'"
        indicator-position="outside"
        v-bind="carouselAttrs"
        v-else
      >
      <template v-if="sources && sources.length">
        <el-carousel-item
          :key="index"
          class="el-carousel__item"
          v-for="(image, index) in sources"
        >
          <el-image 
            ref="image" 
            :src="image.src" 
            class="ele-gallery-image" 
            zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[image.src]"
            :initial-index="4"
          />
        </el-carousel-item>
      </template>
      </el-carousel>
    </template>
  </el-dialog>
</template>

<script setup name="eleGallery">
const { proxy } = getCurrentInstance()
const props = defineProps({
  type: String,
  title: String,
  sources: Array,
  sliceSingle: {
    type: Boolean,
    default: true,
  },
  carouselAttrs: Object,
})
const sourceTitle = ref('')
const initialIndex = ref(0)
const isShowPreview = ref(false)
const bannerHeight = ref('')
const typeSource = computed(() => {
  if (props.sliceSingle && props.sources[initialIndex.value]) {
    return props.sources[initialIndex.value].type
  }
  return 'image'
})
function startPreview(index) {
  console.log(props.sources, index)
  isShowPreview.value = true
  initialIndex.value = index
  sourceTitle.value = props.sources[index].title
}
function handleCarouselChange(index) {
  if (props.sources[index] && props.sources[index].title) {
    sourceTitle.value = props.sources[index].title
  } else {
    sourceTitle.value = ''
  }
}
function imgLoad() {
  proxy.$nextTick(function () {
    // console.log(666, this.$refs.image);
    // this.bannerHeight = this.$refs.image.offsetHeight;
  })
}
onMounted(() => {
  imgLoad()
  // console.log('type', props.type, props.sources)
  window.addEventListener('resize', () => {
    if (proxy.$refs.image) {
      bannerHeight.value = proxy.$refs.image.height
    }
    // console.log('resize:' + bannerHeight.value)
  })
})
defineExpose({
  startPreview,
})
</script>

<style scoped>
.ele-gallery-image {
  width: 100%;
  max-width: 800px;
  /*height: auto;*/
}
.el-carousel__item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*.ele-gallery-image {*/
/*    max-width: 100%;*/
/*    max-height: 100%;*/
/*}*/

.ele-gallery-iframe.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.ele-gallery-iframe.embed-responsive .embed-responsive-item,
.ele-gallery-iframe.embed-responsive iframe,
.ele-gallery-iframe.embed-responsive embed,
.ele-gallery-iframe.embed-responsive object,
.ele-gallery-iframe.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ele-gallery-iframe.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.ele-gallery-iframe.embed-responsive-4by3 {
  padding-bottom: 75%;
}
</style>
